<template>
    <div>
        <div>
            <swiper :options="swiperOption">
                <swiper-slide v-for="item in piclist">
                    <img :src="item.imgs|filtersImg" class="imgWidth">
                    <p style="width:100%;text-align:center;">{{item.name}}</p>
                </swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    const header = [
        {prop: 'name', label: '队名'},
        {prop: 'imgs', label: '分组'},
        {prop: 'age', label: '人数'}
    ]

    export default {
        components: {},
        data() {
            return {
                header,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [],

                options: [
                    {label: '全部', value: 1}
                ],

                searchForm: {
                    courseType: 1,
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },

                swiperOption: {
                    speed: 1000,
                    slidesPerView: 3,
                    spaceBetween: 100,

                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },

                piclist: [],

                selectList: []
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),

            dateHeader() {
                const date = this.activeDate
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchCourseList',
                'fetchCoursePic'
            ]),

            addCourse() {
                this.$router.push('/coachTraining/lessonDetail')
            },

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            onSearch() {
                this.searchForm.pageNum = 1
                // this.fetchList()
            },

            fetchList() {
                let id = Number(this.userStatus.statusId)
                let params = {
                    id,
                    pageNum: 1,
                    pageSize: 10
                }
                this.fetchCoursePic(params).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.piclist = list || []
                    }
                })
            },

            selectChange(val) {
                this.selectList = val
                console.log(this.selectList)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },

            onDelete() {

            }
        },

        created() {
            this.fetchList()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            filtersdata: function (e) {
                return formatDate(e, 'Y-M-D H:I:S')
            },
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].dictNo) {
                        return data[i].dictName
                    }
                }
            },
        },

    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }

    .imgWidth {
        display: block;
        width: 400px;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }
</style>



